<script setup lang="ts">
	const fs = require("fs");
	const { ipcRenderer } = require('electron');
	import { sleep } from "../../utils/tools"
	import { ref, reactive, onMounted, onUnmounted } from "vue";


	let logs = ref("");

	const scrollContainer = ref(null);

	onMounted(() => {
		ipcRenderer.send('message-from-renderer', 'I am ok!'); // 向主进程发送消息
		ipcRenderer.on('message-to-renderer', (event, logData) => {
			// logs.value += `
			// 	`
			// for (var i of logData) {
			// 	console.log(i)
			// 	sleep(0.5)
			// 	logs.value += `${i}`;
			// }
			logs.value += `
				${logData}`;
		})
	});

	onUnmounted(() => {

	});

	const containerRef = ref();

	// let data = reactive();

	const scrollBottom = () => {
		containerRef.value.scrollTop = containerRef.value.scrollHeight;
	}
</script>

<template>
	<div>
		<div class="logs execInfo " ref="containerRef" v-scrollBottom>
			{{ logs}}
			<!-- <div class="stys">{{ logs}}</div> -->
		</div>
	</div>
</template>

<style scoped>
	.logs {
		height: 100%;
		width: 100%;
		color: #fff;
		background: #000;
		padding: 20px;
		white-space: pre-line;
	}

	.execInfo {
		width: 100%;
		height: 400px;
		font-size: 16px;
		line-height: 33px;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		height: 450px;
	}

	@keyframes typing {
		from {
			width: 0;
		}
	}

	@keyframes blink-caret {
		50% {
			border-color: transparent;
		}
	}

	.stys {
		/* font: bold 200% Consolas, Monaco, monospace; */
		border-right: .1em solid;
		width: 100%;
		/* fallback */
		/* width: 30ch; # of chars */
		/* margin: 2em 1em; */
		/* white-space: nowrap; */
		overflow: hidden;
		animation: typing 3s steps(16, end),
			/* # of steps = # of chars */
			/*animation: typing 20s steps(30, end),*/
			/*英文速度*/

			blink-caret .5s step-end infinite alternate;
	}

</style>
